<template>
    <div class="bbinfo">
        <div class="ww">
            <h1>选择放心 用的安心</h1>
            <img src="../../images/nai.jpg" alt="">
            <h2>{{bbinfo.title}}</h2>
            <div class="pri">{{bbinfo.price}}</div>
            <div class="ele">
                <el-input-number v-model="num1" @change="handleChange" :min="1" :max="9" label="描述文字">

            </el-input-number>
            <el-button type="danger" @click="addCarbbinfo" round>加入购物车</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:this.$route.params.id,
            num1:1,
            bbinfo:{}
        }
        
    },
    created(){
        
        this.getbbinfo()
    },
    methods: {
      handleChange(value) {
        // this.num1=value;
        // console.log(this.num1);
        
      },
      getbbinfo(){
            this.$http.get("/bbinfo/"+this.id).then(result=>{
                this.bbinfo = result.body.msg[0]
                console.log(result.body.msg);
                
            })
        },
        addCarbbinfo(){
            
            var bbinfo = {
                id:this.id,
                count:this.num1,
                price:this.bbinfo.price,
                selected:true
            }

            this.$store.commit("addToCar",bbinfo)
        }
    }
}
</script>
<style lang="scss">
.bbinfo{
    height: 2000px;
    background: url(../../images/hui.jpg);
}
.ww{
    width: 1200px;
    margin: 0 auto;
    position: relative;
    h1{
        margin-bottom: 30px;
        margin-left: 500px;
        font-weight: 500;
        
    }
    h2{
        position: absolute;
        top:200px;
        left: 500px;

    }
    .pri{
        height: 70px;
        width: 300px;
        line-height: 70px;
        margin-top: 160px;
        
        position: absolute;
        top:120px;
        left: 450px;
        color: #f10215;
        text-align: center;
        font-size: 40px;

    }
    .ele{
        position: absolute;
        top: 400px;
        left:460px;
    }
}
    


</style>
